<!-- 搜索页 -->
<template>
	<view class="container">
		<!-- 搜索栏-start -->
		<view class="backcolor">
			<luyj-search-bar placeholder="请输入股票代码/股票名称" radius="100" maxlength="11" cancel-color="#fff"
				v-model="keyword" @input="searchchange"></luyj-search-bar>
		</view>
		<!-- 搜索栏-end -->
		<!-- list列表-start -->
		<view class="liststock">
			<view class="section-list" v-for="(liststock,index) in listlonde">
				<view class="left-list">
					<view class="left-list-text">
						<text :class="liststock.all_no.substring(0,2)">{{liststock.all_no.substring(0,2) }}</text>
						<text>{{liststock.name}}</text>
					</view>
					<view class="left-list-num">{{liststock.all_no}}</view>
				</view>
				<view class="right-list" v-if="liststock.all_no.substring(0, 2) == 'sh'">
					上证
				</view>
				<view class="right-list" v-else-if="liststock.all_no.substring(0, 2) == 'bj'"></view>
				<view class="right-list" v-else>
					深证
				</view>
			</view>
		</view>
		<!-- list列表-end -->
	</view>
</template>

<script>
	import debounce from "./debounce.js"
	import request from "/api/request.js"
	export default {
		data() {
			return {
				listStock: [],
				keyword: ''
			};
		},
		// 生命周期函数

		// 计算属性---可以将数据保留下来
		computed: {
			listlonde() {
				return this.listStock.filter(item => item.name.includes(this.keyword) || item.num.includes(this.keyword));
			}
		},
		methods: {
			searchchange: debounce(function(e) {
				if (e != '') {
					request.get("/api/index/getstock", {
							like: e,
							limit: 50
						})
						.then((res) => {
							if(res.code==1){
								this.listStock = res.data
							}
						})
						// .catch((error) => {
						// 	console.log(error);
						// })
				}
			}, 500),
		}
	};


	// 防抖
	// function debounce(fn, delay) {
	// 	var timeout = null;
	// 	return function(e) {
	// 		clearTimeout(timeout);
	// 		timeout = setTimeout(() => {
	// 			fn.apply(this, arguments);
	// 		}, delay);
	// 	};
	// }
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: rgb(245, 245, 245) !important;
		font-family: PingFangSC-Light, 'helvetica neue', 'hiragino sans gb', tahoma, 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
		color: #282828;
		margin: 0px;
		padding: 0px;
		position: absolute;
	}

	.backcolor {
		background-color: #f33841 !important;
	}

	// list列表-start
	.liststock {
		margin-top: 0.5rem !important;
		background-color: #fff;

		.section-list {
			display: flex;
			padding: 0.3rem 0.6rem;
			justify-content: space-between;
			align-items: center;

			.left-list {
				display: flex;
				flex-direction: column;

				.left-list-text text {
					color: #333333;
					font-size: 0.8rem;
					line-height: 1.5;
				}


				.left-list-num {
					color: #999999 !important;
					font-size: 0.6rem !important;
					line-height: 1.5;
				}

			}

			.right-list {
				background: #ff6161;
				color: #ffffff;
				width: 3.5rem;
				font-size: 0.7rem;
				text-align: center;
				line-height: 1rem;
			}
		}
	}

	.sz {
		background: #9b79ea;
		color: #fff !important;
		border-radius: 0.1rem;
		font-size: 0.5rem !important;
		padding: 0 0.2rem;
		margin-right: 0.3rem;
	}

	.sh {
		background: #f33841;
		color: #fff !important;
		border-radius: 0.1rem;
		font-size: 0.5rem !important;
		padding: 0 0.2rem;
		margin-right: 0.3rem;
	}

	.bj {
		background: #4474BB;
		color: #fff !important;
		border-radius: 0.1rem;
		font-size: 0.5rem !important;
		padding: 0 0.2rem;
		margin-right: 0.3rem;
	}

	//list列表-end
</style>